<template>
	<view class="container">
		<!-- 总体满意度 -->
		<view class="overview">
			<text class="title">综合评价</text>
			<view class="satisfaction-container">
				<text class="satisfaction-label">总体满意度:</text>
				<text class="satisfaction-value">{{ satisfactionData.manyi || '暂无数据' }}</text>
			</view>
			<view class="average-scores">
				<view class="score-item">
					<text class="score-label">教师平均分:</text>
					<text class="score-value">{{ satisfactionData.teacherScore || '0' }}</text>
				</view>
				<view class="score-item">
					<text class="score-label">培训平均分:</text>
					<text class="score-value">{{ satisfactionData.trainingScore || '0' }}</text>
				</view>
			</view>
		</view>

		<!-- 反馈列表 -->
		<view class="feedback-list">
			<text class="title">反馈列表</text>
			<view v-if="satisfactionData.feedBackList && satisfactionData.feedBackList.length > 0">
				<view class="feedback-item" v-for="(item, index) in satisfactionData.feedBackList" :key="index">
					<view class="feedback-header">
						<text class="feedback-title">{{ item.title || '无标题' }}</text>
						<text class="feedback-time">{{ item.addtime || '未知时间' }}</text>
					</view>
					<text class="feedback-user">反馈人: {{ item.adduser || '匿名' }}</text>
					<text class="feedback-content">{{ item.feedback_info || '无反馈内容' }}</text>
					<view class="feedback-scores">
						<view class="score-item">
							<text>教师评分:</text>
							<van-rate :value="item.teacher_score" readonly />
							<text>{{ item.teacher_score || '0' }}</text>
						</view>
						<view class="score-item">
							<text>培训评分:</text>
							<van-rate :value="item.training_score" readonly />
							<text>{{ item.training_score || '0' }}</text>
						</view>
					</view>
					<image v-if="item.feedback_img" :src="item.feedback_img" mode="aspectFit" class="feedback-image">
					</image>
				</view>
			</view>
			<view v-else class="empty-state">
				<text>暂无反馈数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		trainingSatisfaction
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				satisfactionData: {
					manyi: "",
					feedBackList: [],
					teacherScore: 0,
					trainingScore: 0
				},
				teacherScore: 0,
				trainingScore: 0
			}
		},
		onLoad() {
			this.ontrainingSatisfaction()
		},
		methods: {
			ontrainingSatisfaction() {
				let data = {
					teacherId: uni.getStorageSync("teacher").id
				}
				trainingSatisfaction(data).then(res => {
					if (res.state === 'ok') {
						this.satisfactionData = res.data || {
							manyi: "",
							feedBackList: [],
							teacherScore: 0,
							trainingScore: 0
						};

						// 处理评分数据，确保是数字类型
						this.teacherScore = parseFloat(this.satisfactionData.teacherScore) || 0;
						this.trainingScore = parseFloat(this.satisfactionData.trainingScore) || 0;

						// 处理反馈列表中的评分
						if (this.satisfactionData.feedBackList && this.satisfactionData.feedBackList.length > 0) {
							this.satisfactionData.feedBackList.forEach(item => {
								item.teacher_score = parseFloat(item.teacher_score) || 0;
								item.training_score = parseFloat(item.training_score) || 0;
							});
						}
					}
				}).catch(error => {
					console.error("获取数据失败:", error);
					// 即使出错也初始化默认数据
					this.satisfactionData = {
						manyi: "",
						feedBackList: [],
						teacherScore: 0,
						trainingScore: 0
					};
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		display: block;
		margin: 30rpx 0 20rpx;
		color: #333;
	}

	.overview {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.satisfaction-container {
		display: flex;
		align-items: center;
		margin: 25rpx 0;
	}

	.satisfaction-label {
		font-size: 32rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.satisfaction-value {
		font-size: 36rpx;
		color: #ee0a24;
		font-weight: bold;
	}

	.average-scores {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.score-item {
		flex: 1;
		padding: 0 15rpx;
	}

	.score-label {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}

	.score-value {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.feedback-list {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.feedback-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.feedback-item:last-child {
		border-bottom: none;
	}

	.feedback-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.feedback-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.feedback-time {
		font-size: 24rpx;
		color: #999;
	}

	.feedback-user {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
	}

	.feedback-content {
		font-size: 30rpx;
		color: #333;
		display: block;
		margin: 15rpx 0;
		line-height: 1.5;
	}

	.feedback-scores {
		margin: 20rpx 0;
	}

	.feedback-image {
		width: 100%;
		height: 300rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	.empty-state {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
	}

	.empty-state text {
		font-size: 28rpx;
	}
</style>